<template>
    <div>
        <ConditionCard
            shadow="never"
            body-style="padding: 24px 24px 6px 24px;"
            @search="handleClick('LIST')"
            @reset="handleClick('REST')"
        >
            <el-form ref="queryForm" :model="queryForm" label-position="right" label-width="90px">
                <el-row>
                    <el-col span="8">
                        <el-form-item :label="$t('courseSummary.aduitType')+'：'">
                            <el-select
                                v-model="queryForm.status"
                                filterable
                                clearable
                                style="width: 100%"
                            >
                                <el-option
                                    v-for="item in options.auditStatusList"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col span="8">
                        <el-form-item :label="$t('exempt.baseInfo.applicationMode')+'：'">
                            <el-select
                                v-model="queryForm.applyType"
                                filterable
                                clearable
                                style="width: 100%"
                            >
                                <el-option
                                    v-for="item in options.applicationModeList"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </ConditionCard>
        <el-card>
            <h1 slot="header">{{$t('exempt.title')+$t('exempt.baseInfo.courseForm')}}</h1>
            <el-row style="margin-bottom:24px">
                <el-col style="text-align:end">
                    <el-button @click="handleClick('NSTD')">{{$t('exempt.baseInfo.noStudyApplicationForm')+$t('exempt.operation.download')}}</el-button>
                    <el-button @click="handleClick('NLTD')">{{$t('exempt.baseInfo.noListenApplicationForm')+$t('exempt.operation.download')}}</el-button>
                    <el-button @click="handleClick('TOAP')" type="primary">{{$t('message.apply')}}</el-button>
                </el-col>
            </el-row>
            <edu-table
                stripe
                :selection="false"
                style="width: 100%"
                tooltip-effect="light"
                :data="applicationList"
                :total="queryForm.total_"
                :pageSize="queryForm.pageSize_"
                :pageNum="queryForm.pageNum_"
                @page-change="handleCurrentChange"
                @selection-change="selectionChange"
            >
                <el-table-column :label="$t('label.classCode')" prop="classCode" />
                <el-table-column :label="$t('label.courseCode')" prop="courseCode" />
                <el-table-column
                    :label="$t('label.courseName')"
                    prop="courseName"
                    min-width="120"
                    show-overflow-tooltip
                />
                <el-table-column :label="$t('label.openClassCollege')" prop="collegeI18n" show-overflow-tooltip />
                <el-table-column :label="$t('label.credits')" prop="credits" />
                <el-table-column :label="$t('exempt.baseInfo.hours')" prop="hours" />
                <el-table-column :label="$t('exempt.baseInfo.applicationMode')">
                    <template slot-scope="scope">
                        <div>{{ getLabel(scope.row.applyType, options.applicationModeList) }}</div>
                    </template>
                </el-table-column>
                <el-table-column :label="$t('courseSummary.aduitType')">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.status == 0" type="info">
                            {{ scope.row.statusI18N }}
                        </el-tag>
                        <el-tag
                            v-else-if="scope.row.status == 2 || scope.row.status == 5"
                            type="danger"
                        >
                            {{ scope.row.statusI18N }}
                        </el-tag>
                        <el-tag
                            v-else-if="scope.row.status == 3 || scope.row.status == 4"
                            type="success"
                        >
                            {{ scope.row.statusI18N }}
                        </el-tag>
                        <el-tag v-else>{{ scope.row.statusI18N }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column :label="$t('courseSummary.operation')">
                    <template slot-scope="scope">
                        <el-button type="text" @click="handleClick('VIEW', scope.row)">
                            {{$t('message.Look')}}
                        </el-button>
                        <el-button
                            type="text"
                            v-if="scope.row.status == 1"
                            @click="handleClick('WD', scope.row)"
                        >
                            {{$t('message.recall')}}
                        </el-button>
                        <el-button
                            type="text"
                            v-else-if="
                                scope.row.status == 2 ||
                                    scope.row.status == 5 ||
                                    scope.row.status == 0
                            "
                            @click="handleClick('EDIT', scope.row)"
                        >
                            {{$t('message.edit')}}
                        </el-button>
                    </template>
                </el-table-column>
            </edu-table>
        </el-card>
    </div>
</template>
<script>
import { exApplyList, selectObjectKey, withdraw, recall} from 'common/src/api/exempt/exempt'
export default {
    data() {
        return {
            queryForm: {
                status: '',
                applyType: '',
                pageNum_: 1,
                pageSize_: 20,
                total_: 0
            },
            options: {
                auditStatusList: [
                    {
                        value: 0,
                        label: '草稿'
                    },
                    {
                        value: 1,
                        label: '已提交'
                    },
                    {
                        value: 2,
                        label: '已驳回'
                    },
                    {
                        value: 3,
                        label: '已通过'
                    },
                    // {
                    //     value: 4,
                    //     label: '行政学院已通过'
                    // },
                    // {
                    //     value: 5,
                    //     label: '行政学院已驳回'
                    // }
                ],
                applicationModeList: [
                    {
                        value: '0',
                        label: '免修'
                    },
                    {
                        value: '1',
                        label: '免听'
                    }
                ]
            },
            applicationList: []
        }
    },
    mounted() {
        this.queryApplyList(this.queryForm)
    },
    methods: {
        async queryApplyList(params = this.queryForm) {
            let { code, data } = await exApplyList(params)
            if (code !== 200) return
            this.applicationList = data && data.list
            this.queryForm.pageNum_ = data.pageNum_
            this.queryForm.pageSize_ = data.pageSize_
            this.queryForm.total_ = data.total_
        },
        handleClick(mode, params) {
            switch (mode) {
                //筛选
                case 'LIST':
                    this.queryApplyList()
                    break
                //重置
                case 'REST':
                    this.queryForm.status = ''
                    this.queryForm.applyType = ''
                    this.queryApplyList()
                    break
                case 'NSTD':
                    //免修申请表下载
                    this.exDownload({ templateType: '0' })
                    break
                case 'NLTD':
                    //免听申请表下载
                    this.exDownload({ templateType: '1' })
                    break
                case 'TOAP':
                    //申请
                    this.$router.push({ path: '/EXLApplicationDetail' })
                    break
                case 'VIEW':
                    this.$router.push({
                        name: 'EXLAuditDetail',
                        query: Object.assign(params, {
                            mode: 'VIEW',
                            isApply: true
                        })
                    })
                    break
                case 'EDIT':
                    let aplForm = {}
                    let str = params.attachFile || '';
                    let fileName = str.substring(str.lastIndexOf('/') + 1, str.length)
                    aplForm.courseList = [
                        {
                            courseCode: params.courseCode,
                            courseName: params.courseName,
                            hours: params.hours,
                            faculty: params.faculty,
                            credits: params.credits,
                            classCode: params.classCode,
                            collegeI18n: params.collegeI18n,
                            college: params.college,
                            period: params.hours
                        }
                    ]
                    aplForm.applyType = params.applyType
                    aplForm.applyDesc = params.applyDesc
                    aplForm.fileList = [{ name: fileName, url: str }]
                    aplForm.status = params.status
                    aplForm.workflowNo = params.workflowNo
                    this.$router.push({
                        name: 'EXLApplicationDetail',
                        query: aplForm
                    })
                    break
                case 'WD':
                    this.$confirm('确认撤回本条申请记录吗?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.appWithdraw(params)
                    })
            }
        },
        async appWithdraw(params) {
            let { code } = await recall({no: params.workflowNo})
            if (code !== 200) return
            this.$message({
                message: '撤回成功',
                type: 'success'
            });
            this.queryApplyList()
        },
        async exDownload(params) {
            let { code, data } = await selectObjectKey(params)
            if (code !== 200) return
            window.location.href = '/api/commonservice/obsfile/downloadfile?objectkey=' + data
        },
        // 分页页数变化时回调
        handleCurrentChange(val) {
            this.queryForm.pageSize_ = val.pageSize
            this.queryForm.pageNum_ = val.pageNum
            this.queryApplyList()
        },
        getLabel(key, optionList) {
            return optionList.find(o => o.value == key)
                ? optionList.find(o => o.value == key).label
                : ''
        }
    }
}
</script>